import React,{ Component } from "react";
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd'
import store from "./store";
import { getInputChangeAction,getAddAction,getDeleteAction} from './store/actionCreators'
import TodoListUI from "./TodolistUI";



class TodoList extends Component {
  constructor(props){
    super(props)
    this.state = store.getState()
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    this.handleOnclick = this.handleOnclick.bind(this)
    this.handleDelite = this.handleDelite.bind(this)
    store.subscribe(this.handleStoreChange)
  }

  render() {
    return (
    <TodoListUI 
      inputValue={this.state.inputValue}
      handleInputChange={ this.handleInputChange }
      handleOnclick={ this.handleOnclick }
      list={ this.state.list }
      handleDelite={ this.handleDelite }
    />
    //   <div>
    //     <div>
    //       <Input  
    //       placeholder="Todo info" value={this.state.inputValue} 
    //       style={{ width: '300px',marginRight:'10px' }}
    //       onChange={ this.handleInputChange }
    //        />
    //       <Button type="primary" onClick={ this.handleOnclick }>primary</Button>
    //     </div>
    //     <List
    //         style={{
    //           marginTop: '10px',
    //           width: "300px"
    //         }}
    //         size="large"
    //         bordered
    //         dataSource={this.state.list}
    //         renderItem={(item,index) => <List.Item onClick={ this.handleDelite.bind(this,index) }>
    //           {item}
    //         </List.Item>}
    //      />
    //   </div>
    )}

  handleInputChange(e){
    // const action = {
    //   type:CHANGE_INPUT_VALUE,
    //   value:e.target.value
    // }
    const action = getInputChangeAction(e.target.value)
    store.dispatch(action)
  }

  handleOnclick(){
   
    const action = getAddAction()
    store.dispatch(action)
  }

  handleDelite(index){
    // const action = {
    //   type:DELETE_TODO_VALUE,
    //   index
    // }
    const action = getDeleteAction(index)
    store.dispatch(action)
  }

  handleStoreChange(){
    this.setState(store.getState())
  }
}

export default TodoList;